import 'package:flutter/material.dart';

class ShopList extends StatelessWidget {
  ShopList({super.key});
  final Map goods = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": '待发货',
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml",
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      //
      padding: EdgeInsets.all(10),
      width: MediaQuery.of(context).size.width,
      height: 250,
      color: Colors.white,
      child: Column(
        children: [
          //1.上部分
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              //
              Text('${goods['createTime']}'),
              Text(
                //
                '${goods['orderState']}',
                style: TextStyle(color: Colors.orange),
              ),
            ],
          ),
          //2.中间部分
          Padding(
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              //设置侧轴居上
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //2.1 图片
                Image.network(goods['image'], width: 120, height: 120),
                //2.2 右侧
                Expanded(
                  flex: 1, //自动占满剩余
                  child: Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: Column(
                      //设置主轴对齐方式 （茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯）  居上不生效 改到上面的row去设置侧轴
                      // mainAxisAlignment: MainAxisAlignment.start,

                      //设置侧轴居左对齐
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        //2.2.1 右侧第一行
                        Row(
                          children: [
                            Expanded(child: Text('${goods['name']}')),
                            SizedBox(width: 10),
                            Text('X${goods['totalNum']}'),
                          ],
                        ),
                        //用SizedBox设置间距
                        SizedBox(height: 10),
                        //2.2.2 第二行
                        Container(
                          //
                          padding: EdgeInsets.all(5),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            color: const Color.fromARGB(255, 243, 241, 241),
                          ),
                          child: Text(
                            '${goods['attrsText']}',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        //第三行
                        SizedBox(height: 10),
                        Text(
                          '￥${goods['curPrice']}',
                          style: TextStyle(color: Colors.red),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          //3.下部分
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              //
              Text('合计：￥${goods['totalNum'] * goods['curPrice']}'),
            ],
          ),
          SizedBox(height: 10),
          //4.按钮
          Row(
            //
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              // Expanded(
              //   child: ElevatedButton(onPressed: () {}, child: Text('取消订单')),
              // ),
              // SizedBox(width: 10),
              // Expanded(
              //   child: ElevatedButton(onPressed: () {}, child: Text('立即付款')),
              // ),
              ElevatedButton(onPressed: () {}, child: Text('取消订单')),
              SizedBox(width: 10),
              ElevatedButton(onPressed: () {}, child: Text('立即付款')),
            ],
          ),
        ],
      ),
    );
  }
}
